<template>
  <Layout>
    <Aside
      slot="aside"
      :data="data"
      @menu-item="handleMenuItem"
    ></Aside>
    <router-view></router-view>
  </Layout>
</template>
<script>
import { mapActions } from "vuex";

import Layout from "@/components/layout";
import Aside from "@/components/aside";
import permissionMixin from "@/mixins/permission";
export default {
  mixins: [permissionMixin],
  components: {
    Layout,
    Aside
  },
  computed: {
    data() {
      return this.setAsideActive(this.$store.state.GeneralizeNav.data);
    }
  },
  methods: {
    // 初始化设置选中的计划、单元
    setAsideActive(data) {
      let planId = Number(this.$route.query.planId) || 0;
      let unitId = Number(this.$route.query.unitId);
      data.forEach(parent => {
        parent.isOpen = parent.isActive = planId === parent.id;
        if (parent.children && parent.children.length) {
          parent.children.forEach(child => {
            child.isActive = unitId === child.id;
            if (planId === parent.id && unitId === child.id) {
              parent.isActive = false;
            }
          });
        }
      });
      return data;
    },
    // 菜单项点击
    handleMenuItem({ parentId, childId }) {
      if (parentId === 0) {
        this.$router.push({
          name: "generalize-plan"
        });
      } else {
        // 单元
        if (childId === undefined) {
          this.$router.push({
            name: "generalize-cell",
            query: {
              planId: parentId
            }
          });
        } else {
          // 创意
          this.$router.push({
            name: "generalize-creative",
            query: {
              planId: parentId,
              unitId: childId
            }
          });
        }
      }
    },
    ...mapActions(["GeneralizeNav/UPDATE_DATA"])
  },
  created() {
    this["GeneralizeNav/UPDATE_DATA"]();
  }
};
</script>